<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc." />
    <meta name="author" content="haijun.liu" />
    <title>系统用户管理</title>
    <link th:href="@{/images/favicon_1.ico}" rel="shortcut icon">
    <link  rel="stylesheet" type="text/css"  th:href="@{/plugins/sweetalert/dist/sweetalert.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/plugins/morris.js/morris.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/bootstrap.min.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/bootstrapValidator.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/bootstrap-table.css}"  />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/bootstrap-dialog.css}"  />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/core.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/icons.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/components.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/pages.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/menu.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/responsive.css}"  />

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrapValidator.js}"></script>
    <script th:src="@{/js/bootstrap-table.js}"></script>
    <script th:src="@{/js/bootstrap-table-zh-CN.js}"></script>
    <script th:src="@{/js/bootstrap-dialog.js}"></script>
    <script th:src="@{/js/app.js}"></script>
    <script th:src="@{/js/modernizr.min.js}"></script>



        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

        <script type="text/javascript">
            $(function(){
                /*bootstrap table*/
                $('#table').bootstrapTable({
                    url:"/system/sysUser/list",//请求数据url
                    queryParams: function (params) {
                        return {
                            offset: params.offset,  //页码
                            limit: params.limit,   //页面大小
                            search : params.search, //搜索
                            order : params.order, //排序
                            ordername : params.sort, //排序
                        };
                    },
                    toolbar:"#toolbar",
                    checkboxHeader: true,
                    clickToSelect:true,
                    showHeader : true,
                    showColumns : true,
                    showRefresh : true,
                    pagination: true,//分页
                    sidePagination : 'server',//服务器端分页
                    pageNumber : 1,
                    pageList: [10, 15, 20],//分页步进值
                    search: true,//显示搜索框
                    //表格的列 data-checkbox="true"
                    columns: [
                        {
                            field: '选择',//域值
                            title: '全选',//标题
                            checkbox:true
                        },
                        {
                            field: 'username',//域值
                            title: '用户名',//标题
                            visible: true,//false表示不显示
                            width : '5%',
                        },
                        {
                            field: 'realName',//域值
                            title: '真实姓名',//标题
                            visible: true,//false表示不显示
                            width : '10%',
                            editable:true,
                        },
                        {
                            field: 'tel',//域值
                            title: '手机号码',//内容
                            visible: true,//false表示不显示
                            width : '10%',
                            editable:true,
                        },
                        {
                            field: 'mobile',//域值
                            title: '电话号码',//内容
                            visible: true,//false表示不显示
                            width : '10%'
                        },
                        {
                            field: 'email',//域值
                            title: '邮箱',//内容
                            visible: true,//false表示不显示
                            width : '10%'
                        },
                        {
                            field: 'lastLoginTime',//域值
                            title: '最后登录时间',//内容
                            visible: true,//false表示不显示
                            sortable: true,//启用排序
                            width : '20%'
                        },
                        {
                            field: 'ip',//域值
                            title: '登录IP地址',//内容
                            visible: true,//false表示不显示
                            width : '10%'
                        },
                        {
                            field: 'createTime',//域值
                            title: '创建时间',//内容
                            visible: true,//false表示不显示
                            sortable: true,//启用排序
                            width : '20%'
                        },
                        {
                            field: 'status',//域值
                            title: '状态',//内容
                            visible: true,//false表示不显示
                            width : '5%',
                            formatter : function (value, row, index) {
                                if (row['status'] == 1) {
                                    return '<span class="badge badge-success">正常</span>';
                                }
                                if (row['status'] == 0) {
                                    return '<span class="badge badge-default">禁用</span>';
                                }
                                return value;
                            }
                        }
                    ]

                });
                function expandTable($detail, cells) {
                    buildTable($detail.html('<table></table>').find('table'), cells, 1);
                }

                function buildTable($el, cells, rows) {
                    var i, j, row,
                        columns = [],
                        data = [];

                    for (i = 0; i < cells; i++) {
                        columns.push({
                            field: 'field' + i,
                            title: 'Cell' + i,
                            sortable: true
                        });
                    }
                    for (i = 0; i < rows; i++) {
                        row = {};
                        for (j = 0; j < cells; j++) {
                            row['field' + j] = 'Row-' + i + '-' + j;
                        }
                        data.push(row);
                    }
                    $el.bootstrapTable({
                        columns: columns,
                        data: data,
                        detailView: cells > 1,
                        onExpandRow: function (index, row, $detail) {
                            expandTable($detail, cells - 1);
                        }
                    });
                }
                /**
                 * 处理添加功能
                 */
                $("#btn_add").click(function () {

                    window.location.href = "/system/sysUser/toAdd";

                });

                /**
                 * 处理修改功能
                 */
                $("#btn_edit").click(function () {
                    // 1 获取选择的行
                    var sels = $('#table').bootstrapTable('getAllSelections');
                    if(sels.length <1){
                        showAlert("请选择要修改的记录", function () {
                            return ;
                        })
                    }else if (sels.length > 1){
                        showAlert("修改时只能选择一条记录", function () {
                            return ;
                        })
                    }else{
                        window.location.href = "/system/sysUser/toUpdate?id=" + sels[0].id;
                    }
                });
                /**
                 * 处理删除功能
                 */
                $("#btn_del").click(function () {
                    // 1 获取选择的行
                    var sels = $('#table').bootstrapTable('getAllSelections');
                    if(sels.length <1){
                        // 如果没有选中的记录，则弹出提示框，提示"请选择要修改的记录"
                        showAlert("请选择要修改的记录", function () {
                            return ;
                        })
                    }else if (sels.length >= 1){
                        // 2 弹出确认对话框
                        showConfirm('确定要删除？', function () {
                            var ids = [];
                            var sels = $('#table').bootstrapTable('getAllSelections');
                            // 2 判断是否有选中的行
                            if (sels.length > 0){
                                $.each(sels, function(i, value) {
                                    ids.push(value.id);
                                });
                                // 3 向后台发送ajax请求进行删除
                                var options = {
                                    url: '/system/sysUser/delete',
                                    type: 'post',
                                    dataType: 'json',
                                    data: {
                                        ids:ids.join(',')
                                    } ,
                                    success: function (data) {
                                        // 4 删除成功后弹出成功提示框，并且刷新表格
                                        if (data){
                                            showAlert('删除成功!',function () {
                                                $('#table').bootstrapTable('refresh', {silent: true})
                                            });
                                        }
                                    }
                                };
                                $.ajax(options);
                            }
                        }, function () {
                            return ;
                        });
                    }
                });
            })



        </script>
    </head>



    <body class="fixed-left">
        <div id="toolbar">
            <p>
                <button id="btn_add" type="button" class="btn btn-success"><i class="fa fa-plus"></i>添加</button>
                <button id="btn_edit" type="button" class="btn btn-warning"><i class="fa fa-edit"></i>修改</button>
                <button id="btn_del" type="button" class="btn btn-danger"><i class="fa fa-close"></i>删除</button>
            </p>
        </div>
        <table id="table"></table>
	</body>
</html>